<template>
  <vue3-seamless-scroll :list="tableData" style="width: 100%;">
    <el-table :data="tableData" stripe :show-header="headerShow" style="width: 100%;--el-table-border-color:none;" :row-class-name="tableRowClassName">
      <el-table-column v-for="(item,index) in tableConfig" :key="index" :prop="item.prop" :label="item.label" :min-width="item.width"></el-table-column>
    </el-table>
  </vue3-seamless-scroll>
  
</template>

<script>
export default {
  props:{
    tableConfig:{
      type:Array,
      default:()=>[]
    },
    tableData:{
      type:Array,
      default:()=>[]
    },
    headerShow:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      tData:[]
    }
  },
  methods: {
    tableRowClassName:({ rowIndex })=>{
      if(rowIndex % 2 === 0){
        return ""
      }else{
        return "warning-row"
      }
    }
  },
  // watch: {
  //   tableData: {
  //     deep: true,
  //     immediate: true,
  //     handler() {
  //       this.$nextTick(()=>{
  //         this.tData = this.tableData;
  //         console.log('this.tData',this.tData);
  //       })
  //     }
  //   }
  // }
}
</script>

<style lang="less" scoped>
.el-table{
  width: 100% !important;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  pointer-events: none;
  // 改变el-table表头背景色
  :deep(.el-table__cell){
    background-color: transparent;
  }
  // 将el-table的单元格改为content-box，以避免在7680*3240时显示不全
  :deep(.cell){
    height: 2.2rem;
    line-height: 2.2rem;
    box-sizing: content-box;
  }
  :deep(tr){
    color: @titleColor;
    background-color: transparent !important;
    font-family: siyuanFont;
    font-size: 1rem;
    th{
      text-align: center;
    }
    td{
      text-align: center;
      padding: 0.1rem  !important;
    }
  }
}
:deep(.el-table__row--striped td){
  background-color: @stripedBGColor !important;
}
</style>
